import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import { 
  TrendingUp, 
  Award, 
  FileText, 
  Download,
  Eye,
  Calendar
} from 'lucide-react';

interface Grade {
  id: string;
  courseName: string;
  courseCode: string;
  credits: number;
  teacher: string;
  semester: string;
  examType: string;
  score: number;
  gpa: number;
  grade: string;
  examDate: string;
  status: 'pass' | 'fail' | 'excellent';
}

export function GradeQuery() {
  const [selectedSemester, setSelectedSemester] = useState('all');
  
  const grades: Grade[] = [
    {
      id: '1',
      courseName: '高等数学A',
      courseCode: 'MATH001',
      credits: 5,
      teacher: '陈教授',
      semester: '2024-1',
      examType: '期末考试',
      score: 92,
      gpa: 4.0,
      grade: 'A',
      examDate: '2024-01-15',
      status: 'excellent'
    },
    {
      id: '2',
      courseName: '计算机程序设计',
      courseCode: 'CS001',
      credits: 4,
      teacher: '张老师',
      semester: '2024-1',
      examType: '期末考试',
      score: 88,
      gpa: 3.5,
      grade: 'B+',
      examDate: '2024-01-18',
      status: 'pass'
    },
    {
      id: '3',
      courseName: '大学英语',
      courseCode: 'ENG001',
      credits: 3,
      teacher: '李老师',
      semester: '2024-1',
      examType: '期末考试',
      score: 85,
      gpa: 3.2,
      grade: 'B',
      examDate: '2024-01-12',
      status: 'pass'
    },
    {
      id: '4',
      courseName: '线性代数',
      courseCode: 'MATH002',
      credits: 3,
      teacher: '王教授',
      semester: '2023-2',
      examType: '期末考试',
      score: 78,
      gpa: 2.8,
      grade: 'B-',
      examDate: '2023-07-10',
      status: 'pass'
    }
  ];

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'excellent':
        return <Badge className="bg-green-100 text-green-800">优秀</Badge>;
      case 'pass':
        return <Badge variant="secondary">通过</Badge>;
      case 'fail':
        return <Badge variant="destructive">不及格</Badge>;
      default:
        return <Badge variant="outline">未知</Badge>;
    }
  };

  const filteredGrades = selectedSemester === 'all' 
    ? grades 
    : grades.filter(grade => grade.semester === selectedSemester);

  const calculateOverallGPA = () => {
    const totalCredits = filteredGrades.reduce((sum, grade) => sum + grade.credits, 0);
    const weightedGPA = filteredGrades.reduce((sum, grade) => sum + (grade.gpa * grade.credits), 0);
    return totalCredits > 0 ? (weightedGPA / totalCredits).toFixed(2) : '0.00';
  };

  const getTotalCredits = () => {
    return filteredGrades.reduce((sum, grade) => sum + grade.credits, 0);
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-medium">成绩查询</h1>
        <Button variant="outline">
          <Download className="mr-2 h-4 w-4" />
          导出成绩单
        </Button>
      </div>

      {/* Statistics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">总绩点</p>
                <p className="text-2xl font-medium">{calculateOverallGPA()}</p>
              </div>
              <TrendingUp className="h-8 w-8 text-blue-500" />
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">获得学分</p>
                <p className="text-2xl font-medium">{getTotalCredits()}</p>
              </div>
              <Award className="h-8 w-8 text-green-500" />
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">优秀科目</p>
                <p className="text-2xl font-medium">{filteredGrades.filter(g => g.status === 'excellent').length}</p>
              </div>
              <FileText className="h-8 w-8 text-orange-500" />
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">平均分</p>
                <p className="text-2xl font-medium">
                  {filteredGrades.length > 0 
                    ? (filteredGrades.reduce((sum, grade) => sum + grade.score, 0) / filteredGrades.length).toFixed(1)
                    : '0.0'
                  }
                </p>
              </div>
              <Calendar className="h-8 w-8 text-purple-500" />
            </div>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="list" className="space-y-4">
        <TabsList>
          <TabsTrigger value="list">成绩列表</TabsTrigger>
          <TabsTrigger value="analysis">成绩分析</TabsTrigger>
        </TabsList>

        <TabsContent value="list" className="space-y-4">
          {/* Filter */}
          <Card>
            <CardContent className="p-4">
              <div className="flex gap-4 items-center">
                <label className="text-sm font-medium">学期筛选:</label>
                <Select value={selectedSemester} onValueChange={setSelectedSemester}>
                  <SelectTrigger className="w-48">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部学期</SelectItem>
                    <SelectItem value="2024-1">2024年第一学期</SelectItem>
                    <SelectItem value="2023-2">2023年第二学期</SelectItem>
                    <SelectItem value="2023-1">2023年第一学期</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>

          {/* Grades Table */}
          <Card>
            <CardHeader>
              <CardTitle>成绩详情</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>课程名称</TableHead>
                    <TableHead>课程代码</TableHead>
                    <TableHead>学分</TableHead>
                    <TableHead>教师</TableHead>
                    <TableHead>学期</TableHead>
                    <TableHead>成绩</TableHead>
                    <TableHead>绩点</TableHead>
                    <TableHead>等级</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredGrades.map((grade) => (
                    <TableRow key={grade.id}>
                      <TableCell className="font-medium">{grade.courseName}</TableCell>
                      <TableCell>{grade.courseCode}</TableCell>
                      <TableCell>{grade.credits}</TableCell>
                      <TableCell>{grade.teacher}</TableCell>
                      <TableCell>{grade.semester}</TableCell>
                      <TableCell className="font-medium">
                        <span className={
                          grade.score >= 90 ? 'text-green-600' :
                          grade.score >= 80 ? 'text-blue-600' :
                          grade.score >= 70 ? 'text-orange-600' :
                          grade.score >= 60 ? 'text-yellow-600' :
                          'text-red-600'
                        }>
                          {grade.score}
                        </span>
                      </TableCell>
                      <TableCell>{grade.gpa}</TableCell>
                      <TableCell>
                        <Badge variant="outline">{grade.grade}</Badge>
                      </TableCell>
                      <TableCell>{getStatusBadge(grade.status)}</TableCell>
                      <TableCell>
                        <Button variant="ghost" size="sm">
                          <Eye className="h-3 w-3" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="analysis" className="space-y-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* GPA Trend */}
            <Card>
              <CardHeader>
                <CardTitle>绩点趋势</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center p-3 bg-blue-50 rounded-lg">
                    <span>2023年第一学期</span>
                    <span className="font-medium">3.2</span>
                  </div>
                  <div className="flex justify-between items-center p-3 bg-green-50 rounded-lg">
                    <span>2023年第二学期</span>
                    <span className="font-medium">3.5</span>
                  </div>
                  <div className="flex justify-between items-center p-3 bg-blue-50 rounded-lg">
                    <span>2024年第一学期</span>
                    <span className="font-medium">3.8</span>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Subject Performance */}
            <Card>
              <CardHeader>
                <CardTitle>学科表现</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm">数学类</span>
                      <span className="text-sm text-muted-foreground">平均: 85</span>
                    </div>
                    <div className="w-full bg-gray-200 rounded-full h-2">
                      <div className="bg-blue-600 h-2 rounded-full" style={{ width: '85%' }}></div>
                    </div>
                  </div>
                  
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm">计算机类</span>
                      <span className="text-sm text-muted-foreground">平均: 88</span>
                    </div>
                    <div className="w-full bg-gray-200 rounded-full h-2">
                      <div className="bg-green-600 h-2 rounded-full" style={{ width: '88%' }}></div>
                    </div>
                  </div>
                  
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm">英语类</span>
                      <span className="text-sm text-muted-foreground">平均: 85</span>
                    </div>
                    <div className="w-full bg-gray-200 rounded-full h-2">
                      <div className="bg-orange-600 h-2 rounded-full" style={{ width: '85%' }}></div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}